console.log('dfdfdf')
var captionEl = document.querySelectorAll('.glide__caption')
var blackBtn = document.querySelector('.black')



// 导航栏滚动sticky 事件
var headerEl = document.querySelector('header')
window.addEventListener('scroll',function(e) {//监听window滚动事件
    var height1 = headerEl.getBoundingClientRect().height
    if(window.pageYOffset - height1 > 400) {
        if(!headerEl.classList.contains('sticky')) {
            headerEl.classList.add('sticky')
            blackBtn.style.display = "flex"
        }
    }else{
        blackBtn.style.display = "none"
        headerEl.classList.remove('sticky')
    }
})
//添加header的mune点击事件
var mune = document.querySelector('.mune')


mune.addEventListener('click', () => {
    headerEl.classList.toggle('open')
})
window.onscroll = function () {
    headerEl.classList.remove('open')     
}



//gilde轮播图的使用
const glide = new Glide('.glide')
glide.on(['mount.after', 'run.after'], () => {
    currentCaptionEl = captionEl[glide.index]
    var myAnimation = anime({
        targets: currentCaptionEl.children,
        translateY: [anime.stagger([40,10]),0],
        duration: 400,
        delay:anime.stagger(100,{start:300}),
        opacity:[0, 1]
      });
})
glide.on('run.before', () => {
    document.querySelectorAll('.glide__caption > *').forEach( item => {
        item.style.opacity = 0
    })
})
glide.mount()


//过滤插件库的使用
// var casesEl = document.querySelector('.cases')
// var isotope = new isotope('.cases')
// var $grid = $('.grid').isotope({
//     // options
//   });
//   // filter items on button click
//   $('.filter-button-group').on( 'click', 'button', function() {
//     var filterValue = $(this).attr('data-filter');
//     $grid.isotope({ filter: filterValue });
//   });
var isotope = new Isotope(".cases",{
    layoutMode: "fitRows",
    itemSelector: ".case-item"
})
var btns = document.querySelector('.filter-btns')
btns.addEventListener("click", (e) => {
    console.log(e.target)
    let {target}  = e
    const filterOption = target.getAttribute('data-filter')
    if(filterOption) {
        document.querySelectorAll('.filter-btn.active').forEach(item => {
            item.classList.remove('active');
        })
        isotope.arrange({filter: filterOption})
    }
})



//scrollseveal 滚动出现的效果


const revealOptions = {
    interval:150,
    delay:300,
    duration:500,
    easing:'ease-in-out',
    origin: 'bottom',
    distance:'50px'
}
ScrollReveal().reveal('.feature',{...revealOptions
   
})
ScrollReveal().reveal('.order',revealOptions)


var dataSectionEl = document.querySelector('.data-section')
ScrollReveal().reveal('.data-section', {
    beforeReveal: () => {
        anime({
            targets: '.data-price .data-num',
            duration: 2000,
            innerHTML: el => {
                return [0, el.innerHTML]
            },
            round:1,
            easing:'easeInExpo'
          });
          dataSectionEl.style.backgroundPosition = `center calc(50% - ${dataSectionEl.getBoundingClientRect().bottom / 5}px)`
    }
    
})
window.addEventListener('scroll', () => {
    const bottom = dataSectionEl.getBoundingClientRect().bottom
    const top = dataSectionEl.getBoundingClientRect().top
    if(bottom >= 0&& top <= window.innerHeight) {
        dataSectionEl.style.backgroundPosition = `center calc(50% - ${bottom / 5}px)`
    }
})



